<template>
  <!--超级管理重置密码Modal-->
  <a-modal
    :title="'重置密码【'+user.nickname +'】'"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleModalOk"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item
        label="隐藏的参数"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        style="display: none"
      >
        <a-input v-decorator="[`userId`, {initialValue: user.id}]" />
      </a-form-item>
      <a-form-item label="新密码" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input-password
          v-decorator="[
            `newPassword`,
            {
              rules: [
                {
                  required: true,
                  message: '必须包含数字、特殊符号、字母，长度8-16',
                  validator: validateToNextPassword
                }
              ]
            }
          ]"
          placeholder="请输入新密码"
          :allowClear="true"
          type="password"
          @blur="handleConfirmBlur"
        />
      </a-form-item>
      <a-form-item label="确定密码" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input-password
          v-decorator="[
            `confirmPassword`,
            {
              rules: [
                {
                  required: true,
                  message: '请再次输入密码'
                },
                {
                  validator: compareToFirstPassword
                }
              ]
            }
          ]"
          placeholder="请再次输入密码"
          :allowClear="true"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import api from '../system'
import { passwordRule } from '@/utils/samsUtil'

export default {
  name: 'UserModalResetPassword',
  data () {
    return {
      visible: false,
      confirmLoading: false,
      width: 600,
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      user: {}
    }
  },
  methods: {
    showModal (param = {}) {
      this.rest()
      // 该方法虽然没问题 但页面会报错（无伤大雅的error） You cannot set a form field before rendering a field associated with the value.
      // this.form.setFieldsValue({ 'userId': userId })
      this.user = param
      this.visible = true
    },
    hide () {
      this.visible = false
    },
    // 确定按钮--保存
    handleModalOk () {
      this.form.validateFields((error, values) => {
        if (error === null) {
          this.axios.post(api.user.resetPassword, values)
            .then((response) => {
              if (response.code === 200) {
                this.$message.success('保存成功')
                this.$emit('refresh')
                this.hide()
              } else {
                this.$message.error('保存失败：' + response.message)
              }
            })
            .catch((error) => {
              this.$message.error('保存异常' + error)
            })
        } else {
          this.$message.error('提交异常，请检查是否有参数未校验成功')
        }
      })
    },
    // 取消按钮
    handleCancel () {
      this.hide()
    },
    // form表单数据初始化方法 还原
    rest () {
      this.form.resetFields()
    },
    handleConfirmBlur (e) {
      this.form.validateFields(['newPassword', 'confirmPassword'], (errors, values) => {
        console.log(errors, values)
      })
    },
    compareToFirstPassword (rule, value, callback) {
      const form = this.form
      if (value && value !== form.getFieldValue('newPassword')) {
        // eslint-disable-next-line
        callback('您输入的两个密码不一致')
      } else {
        callback()
      }
    },
    validateToNextPassword (rule, value, callback) {
      const b = passwordRule(value)
      if (!b) {
        // eslint-disable-next-line
        callback('必须包含数字、特殊符号、字母，长度8-16')
      } else {
        const form = this.form
        if (value && this.confirmDirty) {
          form.validateFields(['confirm'], { force: true })
        }
        callback()
      }
    }
  }
}
</script>
